<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向数据绑定</title>
</head>
<body>
<!--
  React中没有双向数据绑定，要手动封装一个受控组件才能实现双向绑定的效果
  Vue中的插值表达式和v-bind都是单向绑定 只有在表单标签内可以使用双向绑定


-->
  <div id="root">
      <input type="text" :value="name1"/>
      <br>
      <input type="text" v-model="name2"/>


  </div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
    new Vue({
        el:'#root',
        data:{
            name1: 'Alice',
            name2: 'Jack'
        }
    })


</script>
</body>
</html>